<template>
<view class="page">
	<view class="info-box">
		<view class="bg" :style="{backgroundImage: 'url('+detail.avatar+')'}"></view>
		<view class="user-info">
			<image class="pic" mode="aspectFill" :src="detail.avatar" />
			<img class="icon" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/register-code.png" alt="">
			<view class="fboxCol Ycenter Xcenter">
				<view class="name fwb">{{detail.realName}}</view>
				<view class="company">{{detail.company}}</view>
				<view class="job">{{detail.jobTitle}}</view>
			</view>
		</view>
	</view>
</view>
</template>

<script>
import { getByMemberId } from '@/api/h5'
export default {
	data() {
		return {
			detail: {}
		}
	},
	created() {
		this.initData()
	},
	methods: {
		initData() {
			const {
				id
			} = this.$route.query;
			getByMemberId({
				memberId: id
			}).then((res) => {
				this.detail = res.data;
			});
		}
	}
}
</script>

<style scoped>
.info-box {
  position: relative;
  background-color: #000233;
}
.info-box /deep/.mask {
  display: none;
}
.info-box .bg {
  width: 750rpx;
  height: calc(100vh);
  background: #000233 no-repeat center center/cover;
  filter: blur(40rpx);
  opacity: 0.4;
  position: relative;
  z-index: 1;
}
.user-info {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -509rpx 0 0 -259rpx;
  z-index: 2;
  width: 518rpx;
  height: 818rpx;
  background: #ffffff;
  box-shadow: 0px 4rpx 18rpx 0px rgba(16, 20, 117, 0.1);
  border-radius: 32rpx;
  color:#6264A3;
  font-size: 26rpx;
}
.user-info .pic {
  width: 518rpx;
  height: 518rpx;
  border-radius: 32rpx 32rpx 0px 0px;
  overflow: hidden;
}
.icon{position: absolute;right: 16rpx;top: 450rpx;z-index: 3;width: 56rpx;height: 56rpx;}
.user-info .name {
    margin-top: 70rpx;
  font-size: 47rpx;
  color:#000233
}
.user-info .company{margin-top: 48rpx;}
.user-info .job{margin-top: 15rpx;}
</style>